{% extends "base.html" %}
{% block title %}
    会员管理
{% endblock %}
{% block main %}
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">会员列表</h3>
            </div>
            <div class="card-tools ml-3 mt-2">
                <a href="/member_add" class="btn btn-primary" style="color: white">创建会员</a>
            </div>
            <div class="card-body">
                <table id="memberTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>会员编号</th>
                            <th>会员名</th>
                            <th>性别</th>
                            <th>生日</th>
                            <th>身份证号</th>
                            <th>电话号码</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for member in members %}
                            <tr>
                                <td>{{ member.Mid }}</td>
                                <td>{{ member.Mname }}</td>
                                <td>{% if member.Msex == 0 %}男{% elif member.Msex == 1 %}女{% else %}未知{% endif %}</td>
                                <td>{{ member.Mbirthday }}</td>
                                <td>{{ member.Mcard }}</td>
                                <td>{{ member.Mtel }}</td>
                               
                                <td>{{ member.other }}</td>
                                <td>
                                    <a href="/member_find_by_id?id={{ member.Mid }}" class="btn btn-success">修改</a>
                                    <button onclick="deleteMember('{{ member.Mid }}')" class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            $("#memberTable").DataTable({
                "language": {"url": "/static/plugins/datatables/Chinese.json"},
                "responsive": true,
                "autoWidth": false,
            });

            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });

            function deleteMember(Mid) {
                Swal.fire({
                    title: '是否确认删除该会员?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确认',
                    cancelButtonText: '取消'
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            async: true,
                            cache: false,
                            url: "/member_delete/" + Mid,
                            type: "delete",
                            dataType: "json",
                            success: function (res) {
                                Toast.fire({
                                    icon: 'success',
                                    title: res.message
                                });
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                            },
                            error: function (res) {
                                Toast.fire({
                                    icon: 'error',
                                    title: res.message
                                });
                            }
                        });
                    }
                })
            }

            window.deleteMember = deleteMember;
        });

    </script>
{% endblock %}
